<template>
	<view>
		<view class="container">
			<view class="wave"></view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://www.cnblogs.com/coco1s/p/7197662.html'
			};
		},
		onLoad() {},
		methods: {}
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		width: 200px;
		height: 200px;
		padding: 5px;
		border: 5px solid rgb(118, 218, 255);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		overflow: hidden;
	}

	.wave {
		position: relative;
		width: 200px;
		height: 200px;
		background-color: rgb(118, 218, 255);
		border-radius: 50%;

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 400px;
			height: 400px;
			top: 0;
			left: 50%;
			background-color: rgba(255, 255, 255, .4);
			border-radius: 45%;
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 6s linear infinite;
			z-index: 10;
		}

		&::after {
			border-radius: 47%;
			background-color: rgba(255, 255, 255, .9);
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 10s linear -5s infinite;
			z-index: 20;
		}
	}

	@keyframes rotate {
		50% {
			transform: translate(-50%, -73%) rotate(180deg);
		}

		100% {
			transform: translate(-50%, -70%) rotate(360deg);
		}
	}
</style>
